import React, { useState } from 'react';
import { Space, Card, Breadcrumb, Form, Input, Button, Radio, message } from 'antd';// ui组件
import { useAddress } from "../../hook/address.js"
import { useAmendAddress } from "../../hook/amendAddress.js"
import { useHistory } from "react-router-dom";






export default () => {
    // 修改数据的hoock
    const [amendAddress, { setAmend }] = useAmendAddress()
    //定义初始值用来接返回值
    const [newData, steNewDate] = useState({
        name: "",
        Address: "", 
        longitude: "", 
        latitude:"", 
        Cold_store:"",
         Phone:"", 
         Open_hours:""
    })
    const history = useHistory();
    //获取hoock内的方法
    const [, { addAddress }] = useAddress()
    //_获取当前新增数据的id
    let _id = {};
    //点击新增获取表单内的value值
    const onFinish = async (values) => {
        //解构vule值 作为参数 调用hoock内方法 发送远程请求
        const { name, Address, longitude, latitude, Cold_store, Phone, Open_hours } = values
        const newDate = await addAddress(name, Address, longitude, latitude, Cold_store, Phone, Open_hours)
        steNewDate(newDate)
        if (newDate.length !== 0) {
            message.info("新增成功 请上传商户图片", 1)
        }
        _id = newDate._id;
    };

    const onFinishFailed = (errorInfo) => {
        console.log('Failed:', errorInfo);
    };
    //点击上传按钮,携带id跳转至修改图片页面
    const toupload = (_id) => {
        if (_id.length === "") {
            message.info("请先新增自提点", 1)
        } else if (_id.length !== "") {
            setAmend(newData)
            history.push(`/info/uploadAdress`)
        
        }

    }
    return (
        <Space direction="vertical" style={{ width: "100%" }}>
            <Card >
                <Breadcrumb>
                    <Breadcrumb.Item>主页</Breadcrumb.Item>
                    <Breadcrumb.Item>自提点</Breadcrumb.Item>

                    <Breadcrumb.Item>
                        <a href="/#/info/AddAddress" style={{ fontSize: "16px", color: "black" }}>新增自提点</a>
                    </Breadcrumb.Item>
                </Breadcrumb>
            </Card>
            <Card title="新增自提点">
                <Space direction="vertical" style={{ width: 500, dispaly: "flex" }}>
                    <Form
                        name="address"
                        labelCol={{
                            span: 8,
                        }}
                        wrapperCol={{
                            span: 16,
                        }}
                        initialValues={{
                            remember: true,
                        }}
                        onFinish={onFinish}
                        onFinishFailed={onFinishFailed}
                        autoComplete="off"
                    >
                        <Form.Item
                            label="自提点名称"
                            name="name"
                            rules={[{ required: true, message: ' 请输入自提点名称!' }]}
                        >
                            <Input />
                        </Form.Item>
                        <Form.Item
                            label="自提点地址"
                            name="Address"
                            rules={[{ required: true, message: ' 请输入自提点地址!' }]}
                        >
                            <Input />
                        </Form.Item>
                        <Form.Item
                            label="自提点经度"
                            name="longitude"
                            rules={[{ required: true, message: ' 请输入经度!' }]}
                        >
                            <Input />
                        </Form.Item>
                        <Form.Item
                            label=" 自提点纬度"
                            name="latitude"
                            rules={[{ required: true, message: ' 请输入纬度!' }]}
                        >
                            <Input />
                        </Form.Item>
                        <Form.Item
                            label="储存条件"
                            name="Cold_store"
                            rules={[{ required: true, message: ' 请选择是否支持冷冻!' }]}
                        >
                            <Radio.Group
                                rules={[
                                    {
                                        required: true,
                                    },
                                ]}
                            >
                                <Radio value={true}>冷冻</Radio>
                                <Radio value={false}>非冷冻</Radio>

                            </Radio.Group>
                        </Form.Item>
                        <Form.Item
                            label="联系电话"
                            name="Phone"
                            rules={[{ required: true, message: ' 请输入自提点联系方式!' }]}
                        >
                            <Input />
                        </Form.Item>
                        <Form.Item
                            label="营业时间"
                            name="Open_hours"
                            rules={[{ required: true, message: ' 请输入自提点营业时间!' }]}
                        >
                            <Input />
                        </Form.Item>
                        <div style={{ display: "flex" }}>
                            <Form.Item
                                wrapperCol={{
                                    offset: 8,
                                    span: 16,
                                }}
                            >
                                <Button type="primary" htmlType="submit">
                                    新增
                                </Button>

                            </Form.Item>
                            <Button type="primary" style={{ marginLeft: 50 }} onClick={() => { toupload(_id) }}>
                                图片上传
                            </Button>
                        </div>

                    </Form>

                </Space>
            </Card>
        </Space>

    )

}
